<template>
    <div class="admin-user-lists-box">
        <div class="lists"
             v-infinite-scroll="loadMore"
             infinite-scroll-disabled="full"
             infinite-scroll-distance="10">
            <mt-cell :title="`${item.user_name}`"
                     :to="{name: 'admin-room-owner-details', query: {user_id: item.id}}"
                     is-link
                     :label="`${item.time}`"
                     v-for="item in lists">
                <span slot="icon">&#xe604;</span>
                <span class="mobile">{{item.status === 1 ? '' : '未审核'}}</span>
            </mt-cell>
        </div>
        <div class="loading" v-if="loading">
            <mt-spinner type="snake" :size="28"></mt-spinner>
            <span>数据加载中...</span>
        </div>
        <div class="full" v-if="full">没有更多了</div>
    </div>
</template>

<script>
    import apiUrl from '@/api/apiUrl'
    import {Toast} from 'mint-ui'

    export default {
        name: "index",
        data () {
            return {
                lists: [],
                loading: false,
                full: false,
                page: 1,
                row: 20
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            loadMore() {
                if (this.lists.length < this.row) {
                    this.loading = false
                } else {
                    this.loading = true
                    this.$set(this, 'page', this.page + 1)
                    this.setData(this.page, this.row, res => {
                        this.loading = false;
                        if (res.length === 0) {
                            this.$set(this, 'full', true)
                        }
                    })
                }
            },
            setData (page = 1, row = 20, fun = null) {
                let params = {
                    params: {
                        page: page,
                        row: row,
                        type: 2
                    }
                }
                this.$http.get(apiUrl.admin.users, params).then(res => {
                    if (res.data.code === 0) {
                        this.$set(this, 'lists', this.lists.concat(res.data.result))
                        if (fun !== null) {
                            fun(res.data.result)
                        }
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../../assets/css/bases";
    .goly {
        color: @error;
    }
    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: @lager 0;
        span {
            margin-left: @default;
        }
    }
    .full {
        text-align: center;
        margin: @default 0;
        color: @gray;
    }
</style>